<template>
  <div class="layout" :style="{height: 'auto'}">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo"></div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-people-outline" size="20"></Icon>
              {{current_user_name}}
            </MenuItem>
            <MenuItem name="1" @click.native="logout">
              <Icon type="log-out"></Icon>
              退出登录
            </MenuItem>
          </div>
        </Menu>
      </Header>

      <!-- 菜单 -->
      <menu_com_util></menu_com_util>

    </Layout>
  </div>
</template>
<script>
  import menu_com_util from './utils/menu_components_util'

  export default {
    name: "Index",
    data() {
      return {
        page_height: '0px',
        current_user_name: ''
      }
    },
    methods: {
      /**
       * 获取当前登录用户
       */
      get_current_user: function () {
        this.$http.get(this.apiUrl() + 'user/currentuser/', {}, {
          emulateJSON: true
        }).then((response) => {
          if (response && response.body.success) {
            this.current_user_name = response.body.current_user.name;
          } else {
            if (response.body.msg === 'session-timeout') {
              window.location.href = "/";
            } else {
              this.$Notice.error({title: "错误", desc: response.body.msg});
            }
          }
        });
      },
      /**
       * 用户退出登录
       */
      logout: function () {
        const _this = this;
        this.$Modal.warning({
          title: "注意",
          content: "确定要退出登录吗？",
          onOk: function () {
            this.$http.get(this.apiUrl() + 'logout/', {
              emulateJSON: true
            }).then((response) => {
              if (response.body.success) {
                window.location.href = "/";
              } else {
                this.$Notice.error({title: '错误', desc: response.body.msg});
              }
            });
          }
        });
      }
    },
    components: {
      menu_com_util: menu_com_util
    },
    created() {
      this.page_height = this.get_page_height();
      this.get_current_user();
    }
  }
</script>
<style scoped>
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-logo {
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
  }

  .layout-nav {
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
  }
</style>
